<template>
	<view :class="isDark?'dark':''"  :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<view class="cu-custom" :style="{ height: CustomBar + 'px' }">
			<view class="cu-bar fixed" :class="isDark?'dark':'bg-white'" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px', 'background-color':isDark?'#1c1c1c':'#ffffff' }">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back" :style="{'color':isDark?'#ffffff':'#333333'}"></text>
				</view>
				<view class="content" :style="{ top: StatusBar + 'px', 'color':isDark?'#ffffff':'#333333' }">
					{{$t('user.darkmode.facade')}}
				</view>
			</view>
		</view>
		
		<view class="theme-settings-container" :style="{'margin-top': CustomBar + 20 + 'rpx'}">
			<!-- 预览区域 -->
			<view class="theme-preview-section">
				<view class="preview-title" :style="{'color':isDark?'#ffffff':'#333333'}">{{$t('user.darkmode.previeweffect')}}</view>
				<view class="preview-area">
					<view class="preview-phone" :class="previewMode" :style="previewPhoneStyle">
						<view class="preview-content" :style="previewContentStyle">
							<view class="preview-card" :style="previewCardStyle">
								<view class="card-content" :style="previewTextStyle">
									{{$t('user.darkmode.showdifftheme')}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="theme-options" :class="isDark?'dark':''">
				<view class="section-title" :style="{'color':isDark?'#ffffff':'#333333'}">{{$t('user.darkmode.selectfacade')}}</view>
				<radio-group class="theme-radio-group" @change="RadioChange">
					<view class="theme-option" v-for="(item,index) in styleList" :key="index" 
						:class="[radio==String(index)?'active':'', isDark?'dark':'']" 
						:style="getThemeOptionStyle(index)" 
						@tap="previewTheme(index)">
						<label class="theme-option-content">
							<view class="theme-option-icon" :style="getThemeIconStyle(index)">
								<text v-if="index==0" class="tn-icon-wea-sun" :style="getThemeIconTextStyle(index, '#FFB800')"></text>
								<text v-else-if="index==1" class="tn-icon-moon" :style="getThemeIconTextStyle(index, '#4169E1')"></text>
								<text v-else class="tn-icon-time" :style="getThemeIconTextStyle(index, '#228B22')"></text>
							</view>
							<view class="theme-option-text">
								<view class="theme-option-title" :style="getThemeTextStyle(index)">{{item}}</view>
								<view class="theme-option-desc" :style="getThemeSubtextStyle(index)">
									<text v-if="index==0">{{$t('user.darkmode.daytimeuse')}}</text>
									<text v-else-if="index==1">{{$t('user.darkmode.nightuse')}}</text>
									<text v-else>{{$t('user.darkmode.autoswitch')}}</text>
								</view>
							</view>
							<radio class="theme-radio" :checked="radio==String(index)?true:false" :value="String(index)" :style="getRadioStyle(index)"></radio>
						</label>
					</view>
				</radio-group>
			</view>
			
			<!-- 应用按钮 -->
			<view class="apply-section">
				<button class="apply-btn" :class="[isDark?'dark':'', isApplying?'applying':'']" @tap="submit" :disabled="isApplying">
					<view v-if="!isApplying" class="apply-btn-content">
						<text class="tn-icon-check apply-btn-icon"></text>
						<text class="apply-btn-text">{{$t('user.darkmode.applysetting')}}</text>
					</view>
					<view v-else class="apply-btn-loading">
						<text class="tn-icon-loading apply-loading-icon"></text>
						<text class="apply-btn-text">{{$t('user.darkmode.beused')}}</text>
					</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { localStorage } from '@/js_sdk/mp-storage/index.js';
	import darkModeMixin from '@/utils/darkModeMixin.js';
	// #ifdef H5
	import { updateAllPagesTheme } from '@/utils/darkMode.js';
	// #endif
	
	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				styleList: [$t('user.darkmode.daymode'), $t('user.darkmode.nightmode'), $t('user.darkmode.followsystem')],
				radio: '0',
				isDark: false,
				isApplying: false,
				previewMode: 'light', // 预览模式：light, dark, auto
				previewDark: false // 预览时是否为深色模式
			}
		},
		computed: {
			// 预览样式计算属性
			previewPhoneStyle() {
				return {
					'background-color': this.previewDark ? '#2a2a2a' : '#ffffff',
					'border-color': this.previewDark ? '#444' : '#e0e0e0',
					'color': this.previewDark ? '#ffffff' : '#1c1c1c !important'
				};
			},
			previewStatusBarStyle() {
				return {
					'background-color': this.previewDark ? '#1c1c1c' : '#ffffff',
					'color': this.previewDark ? '#ffffff' : '#1c1c1c !important'
				};
			},
			previewHeaderStyle() {
				return {
					'background-color': this.previewDark ? '#1c1c1c' : '#ffffff',
					'border-bottom-color': this.previewDark ? '#333' : '#f0f0f0',
					'color': this.previewDark ? '#ffffff' : '#1c1c1c !important'
				};
			},
			previewContentStyle() {
				return {
					'background-color': this.previewDark ? '#1c1c1c' : '#ffffff',
					'color': this.previewDark ? '#ffffff' : '#1c1c1c !important'
				};
			},
			previewCardStyle() {
				return {
					'background-color': this.previewDark ? '#1c1c1c' : '#ffffff',
					'border-color': this.previewDark ? '#444' : '#e0e0e0',
					'color': this.previewDark ? '#ffffff' : '#1c1c1c !important'
				};
			},
			previewNavStyle() {
				return {
					'background-color': this.previewDark ? '#1c1c1c' : '#ffffff',
					'border-top-color': this.previewDark ? '#333' : '#f0f0f0',
					'color': this.previewDark ? '#ffffff' : '#1c1c1c !important'
				};
			},
			previewTextStyle() {
				return {
					'color': this.previewDark ? '#ffffff' : '#333333 !important'
				};
			},
			previewTitleStyle() {
				return {
					'color': this.previewDark ? '#ffffff' : '#333333 !important'
				};
			},
			previewSubtitleStyle() {
				return {
					'color': this.previewDark ? '#999' : '#666'
				};
			},
			previewIconStyle() {
				return {
					'color': this.previewDark ? '#ffffff' : '#333333'
				};
			},
			previewAvatarStyle() {
				return {
					'background-color': this.previewDark ? '#555' : '#ddd'
				};
			},
			previewBtnStyle() {
				return {
					'background-color': this.previewDark ? '#333' : '#f5f5f5',
					'color': this.previewDark ? '#ffffff' : '#333333'
				};
			},
			previewNavItemStyle() {
				return {
					'color': this.previewDark ? '#999' : '#666'
				};
			},
			previewNavIconStyle() {
				return {
					'color': this.previewDark ? '#007AFF' : '#007AFF'
				};
			},
			previewNavTextStyle() {
				return {
					'color': this.previewDark ? '#007AFF' : '#007AFF'
				};
			}
		},
		onShow() {
			var that = this;
			// 获取当前模式设置
			if(localStorage.getItem('showStyle') || localStorage.getItem('showStyle') == 0) {
				that.radio = String(localStorage.getItem('showStyle'));
			}
			
			// 检查是否处于夜间模式
			that.isDark = getApp().isDark;
			
			// 初始化预览模式
			that.updatePreviewMode(that.radio);
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			RadioChange(e) {
				this.radio = String(e.detail.value);
				this.updatePreviewMode(this.radio);
			},
			previewTheme(index) {
				this.radio = String(index);
				this.updatePreviewMode(String(index));
			},
			updatePreviewMode(mode) {
				if (mode === '0') {
					this.previewMode = 'light';
					this.previewDark = false;
				} else if (mode === '1') {
					this.previewMode = 'dark';
					this.previewDark = true;
				} else {
					// 跟随系统时间
					const hour = new Date().getHours();
					const isNight = hour < 6 || hour >= 18;
					this.previewMode = isNight ? 'dark' : 'light';
					this.previewDark = isNight;
				}
			},
			// 主题选项样式方法
			getThemeOptionStyle(index) {
				const isActive = this.radio === String(index);
				return {
					'background-color': this.isDark ? (isActive ? '#007AFF' : '#2a2a2a') : (isActive ? '#007AFF' : '#ffffff'),
					'border-color': this.isDark ? '#444' : '#e0e0e0'
				};
			},
			getThemeIconStyle(index) {
				const isActive = this.radio === String(index);
				return {
					'background-color': isActive ? 'rgba(255, 255, 255, 0.2)' : (this.isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)')
				};
			},
			getThemeIconTextStyle(index, defaultColor) {
				const isActive = this.radio === String(index);
				return {
					'color': isActive ? '#ffffff' : (this.isDark ? defaultColor : defaultColor)
				};
			},
			getThemeTextStyle(index) {
				const isActive = this.radio === String(index);
				return {
					'color': isActive ? '#ffffff' : (this.isDark ? '#ffffff' : '#333333')
				};
			},
			getThemeSubtextStyle(index) {
				const isActive = this.radio === String(index);
				return {
					'color': isActive ? '#ffffff' : (this.isDark ? '#999' : '#666')
				};
			},
			getRadioStyle(index) {
				const isActive = this.radio === String(index);
				return {
					'border-color': isActive ? '#ffffff' : (this.isDark ? '#555' : '#ddd')
				};
			},
			submit() {
				var that = this;
				if (that.isApplying) return;
				
				that.isApplying = true;
				localStorage.setItem('showStyle', that.radio);
				var showStyle = that.radio;
				
				// 使用全局主题切换函数，支持所有环境的动态切换
				const app = getApp();
				if (app.switchTheme) {
					const isDark = app.switchTheme(showStyle);
					that.isDark = isDark;
					
					uni.showToast({
						title: that.$t('user.darkmode.switchsuccess'),
						icon: 'success',
						duration: 1500
					});
					
					// 延迟返回，让用户看到切换效果
					setTimeout(function() {
						that.isApplying = false;
						uni.navigateBack({
							delta: 1
						});
					}, 800);
				} else {
					// 降级处理：重启应用
					uni.showToast({
						title: that.$t('user.darkmode.setsuccess'),
						icon: 'success',
						duration: 1500
					});
					
					setTimeout(function() {
						that.isApplying = false;
						// #ifdef APP-PLUS
						plus.runtime.restart();
						// #endif
						
						// #ifdef MP
						uni.reLaunch({
							url: '/pages/home/index'
						});
						// #endif
						
						// #ifdef H5
						location.reload();
						// #endif
					}, 1500);
				}
			}
		}
	}
</script>

<style scoped>
/* 基础布局 */
.theme-settings-container {
	padding: 30rpx;
}

/* 预览区域 */
.theme-preview-section {
	margin-bottom: 60rpx;
}

.preview-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	text-align: center;
}

.preview-area {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
}

.preview-phone {
	width: 80%;
	height: 100%;
	border-radius: 50rpx;
	border: 4rpx solid;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease;
}

.preview-status-bar {
	height: 44rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	font-size: 22rpx;
	font-weight: 500;
}

.preview-header {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	border-bottom: 2rpx solid;
}

.preview-header-title {
	font-size: 32rpx;
	font-weight: bold;
}

.preview-header-icon {
	font-size: 36rpx;
}

.preview-content {
	flex: 1;
	padding: 30rpx 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.card-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-right: 20rpx;
}

.card-info {
	flex: 1;
}

.card-title {
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 6rpx;
}

.card-subtitle {
	font-size: 22rpx;
}

.card-content {
	font-size: 26rpx;
	line-height: 1.5;
	margin-bottom: 24rpx;
}

.card-actions {
	display: flex;
	gap: 16rpx;
}

.action-btn {
	flex: 1;
	text-align: center;
	padding: 12rpx 0;
	font-size: 22rpx;
	border-radius: 16rpx;
}

.preview-nav {
	display: flex;
	height: 100rpx;
	border-top: 2rpx solid;
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}

.nav-icon {
	font-size: 36rpx;
}

.nav-text {
	font-size: 20rpx;
}

/* 主题选项 */
.theme-options {
	margin-bottom: 60rpx;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
	text-align: center;
}

.theme-radio-group {
	display: flex;
	flex-direction: column;
	gap: 24rpx;

}

.theme-option {
	border-radius: 28rpx;
	border: 3rpx solid;
	padding: 0;
	overflow: hidden;
	transition: all 0.3s ease;
	transform: scale(1);
}

.theme-option.active {
	transform: scale(1.02);
	box-shadow: 0 16rpx 40rpx rgba(110, 110, 110, 0.3);
}

.theme-option-content {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx;
	width: 100%;
}

.theme-option-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	transition: all 0.3s ease;
}

.theme-option-icon text {
	font-size: 40rpx;
}

.theme-option-text {
	flex: 1;
	margin-right: 20rpx;
}

.theme-option-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.theme-option-desc {
	font-size: 26rpx;
	line-height: 1.4;
}

.theme-radio {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25px;
	position: relative;
}

.theme-radio[checked] {
	border-color: #ffffff !important;
}

.theme-radio[checked]::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20rpx;
	height: 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
}

/* 应用按钮 */
.apply-section {
	display: flex;
	justify-content: center;
	padding: 0 30rpx;
}

.apply-btn {
	width: 100%;
	max-width: 500rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
	border-radius: 50rpx;
	border: none;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16rpx 40rpx rgba(111, 111, 111, 0.4);
	transition: all 0.3s ease;
	transform: scale(1);
}

.apply-btn:not([disabled]):active {
	transform: scale(0.98);
}

.apply-btn.dark {
	background: linear-gradient(135deg, #34C759 0%, #248A42 100%);
	box-shadow: 0 16rpx 40rpx rgba(110, 110, 110, 0.4);
}

.apply-btn.applying {
	background: linear-gradient(135deg, #FF9500 0%, #CC7700 100%);
	box-shadow: 0 16rpx 40rpx rgba(64, 64, 64, 0.4);
}

.apply-btn[disabled] {
	opacity: 0.8;
}

.apply-btn-content,
.apply-btn-loading {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.apply-btn-icon,
.apply-loading-icon {
	font-size: 36rpx;
}

.apply-loading-icon {
	animation: rotate 1s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.apply-btn-text {
	font-size: 32rpx;
	font-weight: bold;
}

/* 夜间模式特殊样式 */
.dark .preview-phone {
	box-shadow: 0 20rpx 60rpx rgba(255, 255, 255, 0.1);
}

.dark .theme-option-icon {
	background: rgba(255, 255, 255, 0.1);
}

.dark .theme-option.active .theme-option-icon {
	background: rgba(255, 255, 255, 0.3);
}
</style> 